

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>

<meta name="format-detection" content="telephone=no" />
<meta content="width=device-width, initial-scale=1" name="viewport" />

<!--[if lt IE 9]>
    <script src="./js/html5.js" type="text/javascript"></script>
<![endif]-->

<title>YUKHIN 01 - HTML</title>

<!-- FOR THEME -->
<link href="./css/inuit.css" rel="stylesheet" type='text/css' />
<link href="./css/prettyphoto.css" rel="stylesheet" type='text/css' />
<link href="./css/style.css" rel="stylesheet" type='text/css' />

<!-- FOR INDIVIDUAL PAGE -->

<link href="./images/theme/icon.png" rel="shortcut icon" />
<link href="./images/theme/icon.png" rel="apple-touch-icon-precomposed" />

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBEAu9S62To1T9VdQMN1cUmkQ1vvf-jRZc&sensor=false"></script> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<body>
	<div class="wrapper">

        <!-- BEGIN HEADER -->
        <header id="header">
        
            <div class="grids">
            	<div class="grid-3 first-space"></div>
	            
	            <!-- BEGIN LOGO -->
	            <div id="logo" class="grid-3">
	            	<a href="#"><img src="./images/theme/logo-big.png" width="228" height="49" alt="" /></a>
	            </div>
	            <!-- END LOGO -->
	            
	            <!-- BEGIN MAIN MENU -->
	            <nav id="main-menu" class="grid-6">
	            	<div class="wrap">
		            	<div class="root"><a href="javascript:;">MENU</a></div>
		                <ul class="menu sf-menu">
		                	<li class="has-child "><a href="./home-1.html">HOME</a>
		                		<ul>
		                			<li><a href="./home-1.html">LAYOUT 1</a></li>
		                			<li><a href="./home-2.html">LAYOUT 2</a></li>
		                			<li><a href="./home-3.html">LAYOUT 3</a></li>
		                		</ul>
		                	</li>
		                	<li class="has-child "><a href="./headings.html">FEATURES</a>
		                		<ul>
		                			<li><a href="./headings.html">HEADINGS</a></li>
		                			<li><a href="./elements.html">PAGE ELEMENTS</a></li>
		                			<li><a href="./pricing-tables.html">PRICING TABLES</a></li>
		                			<li><a href="./about.html">ABOUT</a></li>
		                			<li><a href="./our-team.html">MEET OUR TEAM</a></li>
		                			<li><a href="./404.html">404</a></li>
		                			<li class="has-child"><a href="#">MULTI LEVEL MENU</a>
		                				<ul>
		                					<li><a href="#">LEVEL 3 ITEM 1</a></li>
		                					<li><a href="#">LEVEL 3 ITEM 2</a></li>
		                					<li><a href="#">LEVEL 3 ITEM 3</a></li>
		                				</ul>
		                			</li>
		                		</ul>
		                	</li>
		                	<li class="has-child "><a href="./portfolio-1-col.html">PORTFOLIO</a>
		                		<ul>
		                			<li><a href="./portfolio-1-col.html">ONE COLUMN</a></li>
		                			<li><a href="./portfolio-1-col-alt.html">ONE COLUMN ALT</a></li>
		                			<li><a href="./portfolio-2-cols.html">TWO COLUMNS</a></li>
		                			<li><a href="./portfolio-3-cols.html">THREE COLUMNS</a></li>
		                		</ul>
		                	</li>
		                	<li class="has-child "><a href="./blog.html">BLOG</a>
		                		<ul>
		                			<li><a href="./blog.html">POST LIST</a></li>
		                			<li><a href="./blog-detail.html">POST DETAIL</a></li>
		                		</ul>
		                	</li>
		                	<li class=" active"><a href="./contact.html">CONTACT</a></li>
		                </ul>
		        	</div> <!-- end wrap -->
	            </nav>
	            <!-- END MAIN MENU -->
	            
            </div>

        </header>
        <!-- END HEADER -->	<div id="content">
		
		
		<!-- BEGIN MAIN SECTIONS -->
		
		<!-- BEGIN SECTION -->
		<div class="page-section contact grids">
			<aside class="grid-3">
				<div class="wrap cf">
					<h1 class="section-title big"><span>Contact</span></h1>
					<ul id="address-list" class="list"></ul>
				</div>
			</aside>
			<div class="grid-9">
				<div id="map"></div>
				<div id="info-window"><div class="wrap cf">
					
				</div></div>
				<h3 class="line">Leave a Comment</h3>
				<p>Whatever you would like to share with us, we are always prepared to listen. To receive an answer, you will need to provide us with your email address, of course.</p>
				<form class="form-1 comment-form cf" action="php/contact.php" method="post" name="contactForm" />
					<label for="frm-name">Name</label>
					<input id="frm-name" type="text" class="text-field" name="name" value="" />
					<label for="frm-email">Email</label>
					<input id="frm-email" type="text" class="text-field" name="email" value="" />
					<label for="frm-address" class="is-optional">Address</label>
					<input id="frm-address" type="text" class="text-field" name="address" value="" /><span class="legend">are optional fields</span>
					<label for="frm-message" class="text-area-label">Messages</label>
					<textarea id="frm-message" class="text-area" name="message"></textarea>
					<div id="captcha">
						<script type="text/javascript">
						 var RecaptchaOptions = {
						    theme : 'clean'
						 };
						 </script>
						<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LdmeM0SAAAAAEAve7DvvbZRRi4oMWJ0brUktHlM"></script>

	<noscript>
  		<iframe src="http://www.google.com/recaptcha/api/noscript?k=6LdmeM0SAAAAAEAve7DvvbZRRi4oMWJ0brUktHlM" height="300" width="500" frameborder="0"></iframe><br />
  		<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
  		<input type="hidden" name="recaptcha_response_field" value="manual_challenge" />
	</noscript>					</div>
					<div id="form-messages"></div>
					<a class="button-1 right" onclick="submitForm(contactForm);">SEND</a>
				</form>
			</div>
		</div>
		<!-- END SECTION -->
				
		<!-- END MAIN SECTIONS -->
    </div>

<!-- BEGIN PRE FOOTER -->
	<div id="pre-footer" class="cf">
		<div id="footer-tweets">
			<ul></ul>
		</div>
		<div id="tweets-tmp" style="display:none;visibility:hidden;"></div>
	</div>
<!-- END PRE FOOTER -->

<!-- BEGIN FOOTER -->
        <footer id="footer" class="cf">
        	<div class="grids">
	        	<div class="grid-3 col-1">
	        		<div class="cell-wrapper cf">
	        			<img alt="" id="footer-logo" src="./images/theme/logo-small.png" width="172" height="39" />
	        			<div class="company-info">
	        				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	        			</div>
	        			<div class="footer-section">
	        				<h1>STAY IN TOUCH</h1>
	        				<ul class="social-links">
	        					<li><a href="#"><img alt="" src="./images/theme/icon-social-1.png" width="29" height="29" /></a></li>
	        					<li><a href="#"><img alt="" src="./images/theme/icon-social-2.png" width="29" height="29" /></a></li>
	        					<li><a href="#"><img alt="" src="./images/theme/icon-social-3.png" width="29" height="29" /></a></li>
	        					<li><a href="#"><img alt="" src="./images/theme/icon-social-4.png" width="29" height="29" /></a></li>
	        					<li><a href="#"><img alt="" src="./images/theme/icon-social-5.png" width="29" height="29" /></a></li>
	        				</ul>
	        			</div>
	        		</div>
	        	</div>
	    		<div class="grid-3 col-2">
	    			<div class="cell-wrapper cf">
	    				<div class="footer-section">
	    					<h1>GALLERY</h1>
	    					<ul class="gallery" id="flickr-gallery"></ul>
	    				</div>
	    			</div>
	    		</div>
	    		<div class="grid-3 col-3">
	    			<div class="cell-wrapper cf">
	    				<div class="footer-section">
	    					<h1>CONTACT</h1>
	    					<ul class="contact">
	    						<li class="cf">
	    							<span style="width: 50%;margin-right: 5%;float: left;">
	    								<span style="color: #fff;"><strong>Head office</strong></span><br />
	    								59, Tran Hung Dao street<br />
	    								ward 8, district 5<br />
	    								Ho Chi Minh city<br />
	    								HONG KONG
	    							</span>
	    							<span style="width: 45%;float: left;">
	    								<span style="color: #fff;">+82 907 341 688</span><br />
	    								<a href="#">contact@company.com</a><br /><br />
	    								<span style="color: #fff;">Applications</span><br />
	    								<a href="#">jobs@company.com</a><br />
	    							</span>
	    						</li>
	    						<li class="mb0 cf">
	    							<span style="width: 50%;margin-right: 5%;float: left;">
	    								<span style="color: #fff;"><strong>Oversea office</strong></span><br />
	    								226, Nguyen Trai street<br />
	    								ward 3, district 1<br />
	    								Can Tho city<br />
	    								THAILAND
	    							</span>
	    							<span style="width: 45%;float: left;">
	    								<span style="color: #fff;"><strong>+36 987 361 681</strong></span><br />
	    								<a href="#">contact2@company.com</a><br />
	    							</span>
	    						</li>
	    					</ul>
	    				</div>
	    			</div>
	    		</div>
	    		<div class="grid-3 col-4">
	    			<div class="cell-wrapper cf">
	    				<div class="footer-section">
	    					<h1>OUR CLIENT WORDS</h1>
	    					<ul class="testimonial">
	    						<li class="cf">
	    							<img alt="" src="./images/demo/thumb-36x36.jpg" width="36" height="36" />
	    							<span class="testimonial-content">
	    								Lorem ipsum dolor sit amet, consectetur adipisicing tempor incididunt ut
	    								<span class="client-name">- Le Mong Thuy</span>
	    							</span>
	    						</li>
	    						<li class="cf">
	    							<img alt="" src="./images/demo/thumb-36x36.jpg" width="36" height="36" />
	    							<span class="testimonial-content">
	    								Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	    								<span class="client-name">- Tina</span>
	    							</span>
	    						</li>
	    						<li class="cf mb0">
	    							<img alt="" src="./images/demo/thumb-36x36.jpg" width="36" height="36" />
	    							<span class="testimonial-content">
	    								Lorem ipsum dolor sit amet, consectetur adipisicing elit tempor ut
	    								<span class="client-name">- Huong Tinh Vu</span>
	    							</span>
	    						</li>
	    					</ul>
	    				</div>
	    			</div>
	    		</div>
	    	</div>
		</footer>
        <!-- END FOOTER -->
        
	</div>
	<!-- SCRIPTS -->
	<script type='text/javascript' src='./js/jquery.js'></script>
	<script type='text/javascript' src='./js/respond.min.js'></script>
	<script type='text/javascript' src='./js/mobilemenu.js'></script>
	<script type='text/javascript' src='./js/prettyPhoto.js'></script>
	<script type="text/javascript" src="./js/theme.js"></script>
	<!-- PAGE'S SCRIPTS -->
	<script>
	$(document).ready(function(){
	
		/* Your address list */
		addressList = [
			{address:'', lat:44.797916, lng:-93.278046, info:'<img alt="" class="right mb0" src="./images/demo/thumb-130x130.jpg" width="130" height="130" /><h1 class="mt0">HEAD OFFICE</h1><ul><li class="address">59, Tran Hung Dao street<br>ward 8, district 5<br>Ho Chi Minh city<br>HONG KONG</li><li class="phone"><strong>+82 907 341 688</strong> - Sale<br><strong>+82 327 781 842</strong> - Support</li><li class="email"><strong>sale@yourcompany.com<br>support@yourcompany.com</strong></li></ul>', name:'Head Office'},
			{address:'', lat:44.897916, lng:-94.278046, info:'Store 1', name:'Store 1'},
			{address:'', lat:44.997916, lng:-95.278046, info:'Other Store', name:'Other Store'},
			{address:'', lat:44.697916, lng:-96.278046, info:'Support Center', name:'Support Center'}
		];
		
		$("#map").goMap({
			latitude: 44.797916,
			longitude: -93.278046,
			zoom:14,
			maptype: 'ROADMAP',
		    navigationControl: true,
			scrollwheel: false,
		    mapTypeControl: false
		});
		$("iframe").removeAttr('frameborder');
		overlay = $.goMap.overlay;

		setTimeout(function() {
			for (var i = 0; i < addressList.length; i++) {
				$.goMap.createMarker({latitude: addressList[i].lat,longitude: addressList[i].lng});
			}

			$($.goMap.markers).each(function(i,marker){
				var cur_li = $("<li />")
					.html('<a>'+addressList[i].name+'</a>')
					.click(function(){
						displayPoint(marker, i);
						$(this).parent().find('li').removeClass('active');
						$(this).addClass('active');
						
						panMap(marker);
					})
					.appendTo("#address-list");

				$.goMap.createListener({type:'marker', marker:marker}, 'click', function() {
					displayPoint(marker, i);
					panMap(marker);
				});

			});
			
			$("#info-window").appendTo(overlay.getPanes().floatPane);
			displayPoint($.goMap.markers[0], 0);
			panMap($.goMap.markers[0]);
			$("#address-list li:nth(0)").addClass('active');
			
			function panMap(marker) {
				var position = $($.goMap.mapId).data(marker).position;
				proj = overlay.getProjection();
				
				pos = proj.fromLatLngToContainerPixel(position);
				pos.x = pos.x + 140;
				position = proj.fromContainerPixelToLatLng(pos);
				
				$.goMap.map.panTo(position);
			}

			function displayPoint(marker, index){

				$("#info-window").attr('mId', marker);

				$("#info-window").hide();
				var position = $($.goMap.mapId).data(marker).position;
		
				var moveEnd = $.goMap.createListener({type:'map'}, 'bounds_changed', function() {

					var markerOffset = overlay.getProjection().fromLatLngToDivPixel(position);
					$("#info-window .wrap")
						.html(addressList[index].info)
						.parent().fadeIn()
						.css({ top:markerOffset.y-100, left:markerOffset.x+26 });

					if($("#info-window").attr('mId') != marker)
						$.goMap.removeListener(moveEnd);
				});
				$("#address-list li").removeClass('active');
				$("#address-list li:nth-child("+index+")").addClass('active');
			}
			
			
		},3000);
	});
	</script>
<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
</body>
</html>
